export function Main({ list, handleDelById, handleUpdateById, isAll, handleCheckAll }) {
  return (
    <section className="main">
      <input
        onChange={(e) => handleCheckAll(e.target.checked)}
        checked={isAll}
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
      />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li key={item.id} className={item.isDone ? 'completed' : ''}>
            <div className="view">
              <input
                onChange={() => handleUpdateById(item.id)}
                checked={item.isDone}
                className="toggle"
                type="checkbox"
              />
              <label>{item.task}</label>
              <button onClick={() => handleDelById(item.id)} className="destroy"></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
